<template>
	<view class="index_box">
		<view class="navigation">
			<u-grid :col="4" @click="goDetails">
				<u-grid-item index="appointment/appointment">
					<u-icon name="clock" color="#f75152" :size="60"></u-icon>
					<view class="grid-text">明日预约</view>
				</u-grid-item>
				<u-grid-item index="supervise/supervise">
					<u-icon name="../../static/index_icon/safe_z.png" :size="60"></u-icon>
					<view class="grid-text">监督占座</view>
				</u-grid-item>
				<u-grid-item index="record/record">
					<u-icon name="../../static/index_icon/record.png" :size="60"></u-icon>
					<view class="grid-text">使用记录</view>
				</u-grid-item>
				<u-grid-item index="shop/shop">
					<u-icon name="../../static/index_icon/exchange.png" color="#97ce83" :size="60"></u-icon>
					<view class="grid-text">切换座位</view>
				</u-grid-item>
				<u-grid-item index="propsBag/propsBag">
					<u-icon name="../../static/index_icon/yijian.png" :size="60"></u-icon>
					<view class="grid-text">意见反馈</view>
				</u-grid-item>
				<u-grid-item index="task/task">
					<u-icon name="../../static/index_icon/task.png" :size="60"></u-icon>
					<view class="grid-text">签到</view>
				</u-grid-item>
				<u-grid-item index="ranking/ranking">
					<u-icon name="../../static/index_icon/zuowei.png" :size="60"></u-icon>
					<view class="grid-text">常用座位</view>
				</u-grid-item>
				<u-grid-item index="all/all">
					<u-icon name="../../static/index_icon/all.png" :size="60"></u-icon>
					<view class="grid-text">全部</view>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="notice">
			<view class="notice_icon">
				<u-image width="50rpx" height="50rpx" :src="noticeIcon"></u-image>
			</view>
			<view class="notice_content">
				<view>{{noticeTitle}}</view>
				<text class="notice_content_text">
					{{noticeText}}
				</text>
			</view>
		</view>

		<view class="order">
			<view class="order_title"><text>当前预定</text></view>
			<scroll-view class="order_content" scroll-x="true">
				<view class="order_list" v-for="(item,index) in orderList" :key="index">
					<text class="order_list_item">{{item.local}}-{{item.number}}</text>
				</view>

			</scroll-view>
		</view>
		<view class="list">
			<view class="list_item" v-for="(item,index) in sumList" :key="index">
				<view class="sum">
					<text class="type">{{item.type}}</text>
					<text class="total">{{item.total}}</text>
				</view>
				<text class="content">{{item.content}}</text>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noticeIcon: '../../static/index_icon/notice.png',
				noticeTitle: "这是通知标题！",
				noticeText: "这是通知的具体内容。。。。",
				orderList: [{
					local: "阳光A-马列，毛泽东思想论阅览室",
					number: '034'
				}, {
					local: "阳光B-马列，毛泽东思想论阅览室",
					number: '035'
				}, ],
				sumList: [{
					type: '武汉纺织大学-总借还书(资格)',
					total: '1000/1000',
					content: '8:00 ~ 22:00 可在开馆时提前1.00小时 预订'
				}, {
					type: '阳光-自主学习中心(二楼)',
					total: '100/100',
					content: '8:00 ~ 22:00 可在开馆时提前1.00小时 预订'
				} ,{
					type: '阳光-自习室(二楼)',
					total: '100/100',
					content: '8:00 ~ 22:00 可在开馆时提前1.00小时 预订'
				}, {
					type: '阳光-历史文学阅览室(二楼)',
					total: '100/100',
					content: '8:00 ~ 22:00 可在开馆时提前1.00小时 预订'
				}, {
					type: '阳光-现代文学阅览室(三楼)',
					total: '100/100',
					content: '8:00 ~ 22:00 可在开馆时提前1.00小时 预订'
				} ,{
					type: '阳光-教育，语言阅览室(四楼)',
					total: '100/100',
					content: '8:00 ~ 22:00 可在开馆时提前1.00小时 预订'
				},{
					type: '南湖-经济，社会科学阅览室(一楼)',
					total: '100/100',
					content: '8:00 ~ 22:00 可在开馆时提前1.00小时 预订'
				} ,{
					type: '南湖-外国文学论阅览室(二楼)',
					total: '100/100',
					content: '8:00 ~ 22:00 可在开馆时提前1.00小时 预订'
				} ]
			}
		},
		onLoad() {

		},
		methods: {
			goDetails(index) {
				console.log("Details:",index)
				uni.navigateTo({
				    url: "/pages/index/" + index
				});
			}
		}
	}
</script>

<style lang="scss">
	.index_box {
		height: 100%;
		width: 100%;

		.navigation {
			width: 100%;
			// margin: 10rpx 0;

		}

		.notice {
			width: 100%;
			height: 300rpx;
			// background-color: #909399;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			border-bottom: 1px #d2cfd2 solid;
			border-top: 1px #d2cfd2 solid;

			.notice_icon {
				position: absolute;
				top: 20rpx;
				left: 20rpx;
			}

			.notice_content {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 25rpx 0 0 0;

				.notice_content_text {
					margin-top: 10rpx;
				}
			}
		}

		.order {
			height: 300rpx;
			width: 100%;
			// background-color: #909399;
			padding: 40rpx 40rpx;
			display: flex;
			flex-direction: column;
			border-bottom: 1px #d2cfd2 solid;

			.order_title {
				font-size: 35rpx;
				font-weight: 700;
			}

			.order_content {
				width: 100%;
				flex: 1;
				// background-color: red;
				white-space: nowrap;
				padding-top: 30rpx;


				.order_list {
					height: 4em;
					width: 10em;
					background-color: #73a2ef;
					border-radius: 10rpx;
					color: #ffffff;
					padding: 0 10rpx;
					display: inline-block;
					position: relative;
					margin-right: 20rpx;



					// display: flex;
					// flex-direction: column;
					// align-items: center;

					.order_list_item {
						white-space: normal;
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
					}
				}

			}

		}

		.list {

			.list_item {
				height: 150rpx;
				width: 100%;
				border-bottom: 1px #d2cfd2 solid;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				padding: 0 40rpx;

				.sum {
					display: flex;
					justify-content: space-between;

					.type {
						font-size: 35rpx;
						font-weight: 700;
					}

					.total {
						font-size: 35rpx;
						color: #628bc0;
					}
				}

				.content {
					color: #b1b0b1;
				}
			}
		}
	}
</style>
